<template>
    <div>
      <Breadcrumb>
      <BreadcrumbItem>角色增加</BreadcrumbItem>
    </Breadcrumb>
    <Divider />
    <i-form v-ref:form-validate :model="formDate" :rules="ruleValidate" :label-width="80">
        <Form-item label="角色姓名" prop="roleName">
            <i-input v-model="formDate.roleName" placeholder="请输入姓名" style="width:300px"></i-input>
        </Form-item>
        <Form-item label="角色描述" prop="roleDesc">
            <i-input v-model="formDate.roleDesc" placeholder="请输入描述" style="width:300px"></i-input>
        </Form-item>
        <Form-item label="是否有效" prop="ifVilid">
            <i-input v-model="formDate.ifVilid" placeholder="请输入..." style="width:300px"></i-input>
        </Form-item>          
        <Form-item>
            <i-button type="primary" @click="handleSubmit('formValidate')">提交</i-button>
            <i-button type="content" @click="handleReset('formValidate')" style="margin-left: 8px">重置</i-button>
        </Form-item>
    </i-form>
    </div>
</template>
<script>
export default {
  data () {
    return {
      formDate: {
        roleId: '',
        roleName: '',
        roleDesc: '',
        ifVilid: ''
      },
      ruleValidate: {
        roleName: [
          { required: true, message: '角色名不能为空', trigger: 'blur' }
        ],
        roleDesc: [
          { required: true, message: '描述不能为空', trigger: 'blur' }
        ],
        ifVilid: [
          { required: true, message: '...不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
//提交
    handleSubmit:function (name) {
      this.$axios.post('role',{
        roleName:this.formDate.roleName,
        roleDesc:this.formDate.roleDesc,
        ifVilid:this.formDate.ifVilid
      })
      .then(response=>{
        if(response.data.code==0){
          this.$router.push("roleManage"),
          alert("添加成功")
        }
      }
      )
        .catch()
    },
//重置
    handleReset (name) {
      this.$refs[name].resetFields()
    }
  }
}
</script>
